import React from 'react'
import { Card, Button, Form, Input, Space, Table, Tag } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/lib/table'
interface DataType {
  id: number
  createTime: string
  updateTime: string
  isDeleted: number
  hosname: string
  hoscode: string
  apiUrl: string
  signKey: string
  contactsName: string
  contactsPhone: string
  status: number
}

const columns: ColumnsType<DataType> = [
  {
    // 决定了表格中,对应列表头的名称
    title: '序号',
    // 决定了这一列,渲染data数据中的哪一项
    // 以当前为例:表示Name这一列,渲染的是data数据中,每一个对象name属性的值
    // dataIndex: 'name',
    // 当某一列需要自定义渲染的内容时,可以使用render属性
    render: (text, record, index) => {
      // 此时打印的text和record都是当前data中的数据
      // index就是数据的下标
      // console.log(text, record, index)
      // render中返回什么,则这一列就渲染什么
      return index + 1
    },
  },
  {
    title: '医院名称',
    dataIndex: 'hosname',
  },
  {
    title: '医院编号',
    dataIndex: 'hoscode',
  },
  {
    title: 'api基础路径',
    dataIndex: 'apiUrl',
  },
  {
    title: '签名',
    dataIndex: 'signKey',
  },
  {
    title: '联系人名称',
    dataIndex: 'contactsName',
  },
  {
    title: '联系人手机',
    dataIndex: 'contactsPhone',
  },

  {
    title: '操作',
    render: () => (
      <Space>
        <Button icon={<EditOutlined />} type="primary"></Button>
        <Button icon={<DeleteOutlined />} type="primary" danger></Button>
      </Space>
    ),
  },
]

const data: DataType[] = [
  {
    id: 82093,
    createTime: '2022-06-14 16:25:11',
    updateTime: '2022-06-14 16:25:11',
    isDeleted: 0,
    hosname: '伦敦市周嘉琪中医院',
    hoscode: '43265436',
    apiUrl: '周嘉琪家',
    signKey: '5967e941b12e2a8384c6a14b78db1bb4',
    contactsName: '周嘉琪',
    contactsPhone: '13891439432',
    status: 1,
  },
]
export default function HospitalSet() {
  // 点击查询按钮触发
  const onFinish = (values: any) => {
    console.log('Success:', values)
  }

  return (
    <Card>
      <Space direction="vertical" size="large">
        <Form name="basic" onFinish={onFinish} layout="inline">
          <Form.Item name="username">
            <Input placeholder="医院名称" />
          </Form.Item>

          <Form.Item name="password">
            <Input placeholder="医院编号" />
          </Form.Item>
          <Form.Item>
            {/* 有htmlType="submit"的按钮,会触发Form的onFinish */}
            <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
              查询
            </Button>
          </Form.Item>
          <Form.Item>
            <Button>清空</Button>
          </Form.Item>
        </Form>
        <Space>
          <Button type="primary">添加</Button>
          <Button disabled>批量删除</Button>
        </Space>
        {/* columns: 决定了表格中有几列,每一列的标题和要渲染的数据是什么
        
            data: 决定了表格最终渲染的数据是什么 
            rowKey: 在列表渲染表格的时候,给每一个子元素添加的key 
            rowKey="id" 表示加的唯一值是data数据里面的id属性
        */}
        <Table columns={columns} dataSource={data} rowKey="id" />
      </Space>
    </Card>
  )
}
